<!-- f-scroll 多层嵌套 -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>教育页面</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    #focusPage {
      width: 1280px;
      height: 720px;
      background-color: black;
    }

    .nav {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100px;
      white-space: nowrap;
    }

    .nav>.focusScrollContent {
      position: absolute;
      left: 0;
      top: 0;
    }

    .nav>.focusScrollContent>.focusScrollItem {
      display: inline-block;
      font-size: 24px;
      padding: 6px 16px;
      min-width: 100px;
      color: #fff;
      border-radius: 24px;
      text-align: center;
      margin: 0 6px;
    }

    .page {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 600px;
    }

    .page>.focusScrollContent {
      position: absolute;
      left: 0;
      top: 0;
    }

    .classNames {
      position: relative;
      overflow: hidden;
      width: 1174px;
      height: 40px;
      border-radius: 66px;
      background-color: rgba(177, 16, 16, 0.1);
      white-space: nowrap;
      left: 54px;
      margin-bottom: 50px;
    }

    .classNames>.focusScrollContent {
      position: absolute;
      left: 0;
      top: 0;
    }

    .classNames>.focusScrollContent>.focusScrollItem {
      display: inline-block;
      font-size: 24px;
      height: 40px;
      line-height: 40px;
      min-width: 100px;
      color: #fff;
      border-radius: 24px;
      text-align: center;
      margin: 0 16px;
    }

    .subject {
      position: relative;
      overflow: hidden;
      width: 108px;
      height: 420px;
      border-radius: 16px;
      left: 54px;
      background-color: rgba(177, 16, 16, 0.1);
      float: left;
    }

    .subject>.focusScrollContent {
      position: absolute;
      left: 0;
      top: 0;
    }

    .subject>.focusScrollContent>.focusScrollItem {
      font-size: 24px;
      width: 108px;
      height: 52px;
      line-height: 52px;
      color: #fff;
      border-radius: 24px;
      text-align: center;
      margin: 36px 0;
    }

    .books {
      position: relative;
      overflow: hidden;
      width: 108px;
      height: 420px;
      border-radius: 16px;
      left: 154px;
      background-color: rgba(177, 16, 16, 0.1);
      float: left;
    }

    .books>.focusScrollContent {
      position: absolute;
      left: 0;
      top: 0;
    }

    .books>.focusScrollContent>.focusScrollItem {
      font-size: 24px;
      width: 108px;
      height: 52px;
      line-height: 52px;
      color: #fff;
      border-radius: 24px;
      text-align: center;
      margin: 36px 0;
    }



    .booksDetail {
      position: relative;
      overflow: hidden;
      width: 500px;
      height: 400px;
      border-radius: 66px;
      background-color: rgba(177, 16, 16, 0.1);
      white-space: nowrap;
      left: 354px;
      top: 50px;
      margin-bottom: 50px;
      float: left;
    }

    .booksDetail>.focusScrollContent {
      position: absolute;
      left: 0;
      top: 0;
    }

    .booksDetail>.focusScrollContent>.focusScrollItem {
      display: inline-block;
      font-size: 24px;
      height: 400px;
      line-height: 400px;
      min-width: 100px;
      color: #fff;
      border-radius: 24px;
      text-align: center;
      margin: 0 16px;
    }

    .popup{
      width: 1280px;
      height: 720px;
      background-color: rgba(0, 0, 0, 0.8);
      position: fixed;
      left: 0;
      top: 0;
      display: none;
    }

    .dark-focus {
      background-color: rgba(255, 255, 255, 0.1);
    }

    .is-focus {
      background-color: #FFD300;
      color: #831C00 !important;
    }
  </style>
</head>

<body>
  <div id="focusPage">
    <div class="focusSwitch" id="switchPage" f-focusid="classContent3-5">
      <div class="focusScroll nav focusBox" id="navContent-box" f-scroll="X" f-cache="navContent-7" onblur="console.log">
        <div class="focusScrollContent" id="navContent"></div>
      </div>
      <div class="focusScroll page" f-scrollbox="true" f-scroll="Y">
        <div class="focusScrollContent">

          <div class="focusScrollItem">
            <div class="focusScroll classNames focusBox" id="classtop1" f-godown="left-box" f-scroll="X" f-cache="classContent-7">
              <div class="focusScrollContent" id="classContent"></div>
            </div>
          </div>

          <div class="focusScrollItem" style="overflow: hidden;">
            <div class="focusScroll subject focusBox" f-scroll="Y" id="left-box" sequenceRow="1" sequenceLink="false"
              f-cache="subjectContent-0">
              <div class="focusScrollContent" id="subjectContent"></div>
            </div>
            <div class="focusScroll books focusBox" f-scroll="Y" sequenceRow="1" sequenceLink="false" f-cache="booksContent-6">
              <div class="focusScrollContent" id="booksContent"></div>
            </div>
            <div class="focusScroll booksDetail focusBox" f-scroll="X" f-cache="booksDetailContent-8">
              <div class="focusScrollContent" id="booksDetailContent"></div>
            </div>
          </div>



          <div class="focusScrollItem">
            <div class="focusScroll classNames focusBox" f-scroll="X" f-cache="classContent2-0">
              <div class="focusScrollContent" id="classContent2"></div>
            </div>
          </div>

          <div class="focusScrollItem">
            <div class="focusScroll classNames focusBox" id="classContent3Box" f-scroll="X" f-cache="classContent3-6">
              <div class="focusScrollContent" id="classContent3"></div>
            </div>
          </div>

          <div class="focusScrollItem">
            <div class="focusScroll classNames focusBox" f-scroll="X" f-cache="classContent4-0">
              <div class="focusScrollContent" id="classContent4"></div>
            </div>
          </div>

          <div class="focusScrollItem">
            <div class="focusScroll classNames focusBox" f-scroll="X" f-cache="classContent5-0">
              <div class="focusScrollContent" id="classContent5"></div>
            </div>
          </div>

          <div class="focusScrollItem">
          </div>
        </div>
      </div>
    </div>
    <div class="focusSwitch popup" f-type="popup" id="switchPopup"  onBack="onClose('switchPopup', false)">
      <div class="focusScroll classNames focusBox" f-scroll="X" f-cache="classContent6-0">
        <div class="focusScrollContent" id="classContent6"></div>
      </div>
    </div>
  </div>
</body>
<!-- <script src="./focus2.1.js"></script> -->
<script src="../focus2.2.js"></script>
<script>
  appendNavHtml()
  appendClassHtml()
  appendClass2Html()
  appendClass3Html()
  appendClass4Html()
  appendClass5Html()
  appendClass6Html()
  appendSubjectHtml()
  appendBookstHtml()
  appendbooksDetailtHtml()
  
  var framework = new LyFocusFrame("focusPage");
  var _subCacheId = "subjectContent-0";
  function appendNavHtml() {
    var _list = ["新闻", "本土", "免费", "应用中心", "看电视", "电影", "电视剧", "4K高清", "综艺", "体育", "教育", "音乐", "生活", "电影", "电视剧", "4K高清", "综艺", "体育", "教育", "音乐", "生活"]
    appendHtml("navContent", _list)
  }
  function appendClassHtml() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" onListenerMove="onClassMove" id="classContent-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("classContent").innerHTML = _html
  }
  function appendClass2Html() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" id="classContent2-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("classContent2").innerHTML = _html
  }
  function appendClass3Html() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" id="classContent3-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("classContent3").innerHTML = _html
  }
  function appendClass4Html() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" id="classContent4-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("classContent4").innerHTML = _html
  }
  function appendClass5Html() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" id="classContent5-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("classContent5").innerHTML = _html
  }
  function appendClass6Html() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" id="classContent6-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("classContent6").innerHTML = _html
  }
  function appendSubjectHtml() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    var _html = ""
    for (var i = 0; i < _list.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" onFocus="onSubjectFocus" id="subjectContent-' + i + '">' + _list[i] + '</div>'
    }
    document.getElementById("subjectContent").innerHTML = _html
  }
  function appendBookstHtml() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    appendHtml("booksContent", _list)
  }
  function appendbooksDetailtHtml() {
    var _list = ["一年级", "二年级", "三年级", "四年级", "五年级", "六年级", "初一", "初二", "初三", "高一", "高二", "高三", "大一", "大二", "大三", "大四"]
    appendHtml("booksDetailContent", _list)
  }
  function onSubjectFocus(ev) {
    _subCacheId = (ev.id);

  }
  // function onClassMove(ev) {
  //   if (ev.key != "DOWN") return
  //   focus.findSwitch("switchPage").onChangeFocus(_subCacheId)
  //   return true
  // }
  function appendHtml(id, _l) {
    var _html = ""
    for (var i = 0; i < _l.length; i++) {
      _html += '<div class="focusScrollItem focusWidget" onEnter="onOk(1)" id="' + id + "-" + i + '">' + _l[i] + '</div>'
    }
    document.getElementById(id).innerHTML = _html
  }
  function onBox1Focus(e){
    console.log(e);
    return "navContent-1"
  }
  // function onOk(e){
  //   focus.onPopup('switchPopup', true)
  // }
  // function onClose(e){
  //   focus.onPopup('switchPopup', false)
  // }
</script>

</html>